<template>

    <van-nav-bar
          title="商品列表"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
<!---商品列表-->
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
    <div v-for="item in productData" :key="item">
    <!--商品信息-->
    <van-card
    num="1"
    :price="item.price"
    :desc="item.brief"
    :title="item.name"
    :thumb="item.img"
    @click="click(item.id)"
  />

    </div>
  </van-list>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ProductApi } from '@/api';
import { useRoute,useRouter } from 'vue-router';
const route = useRoute()
const router= useRouter()
//分页数据
const pageData = reactive({
    pageNum: 1,
  pageSize: 5,
    categoryId:0
})

//const list = ref([]);
const productData=ref([])
const loading = ref(false); //是否处于加载状态，加载过程中不触发 load 事件
const finished = ref(false); // 是否已加载完成，加载完成后不再触发 load 事件

onMounted(() => { 
  pageData.categoryId=Number(route.query.categoryId)
})


const CallProductApi = () => { 
  //加载的属性值打开
  loading.value = true
  
  ProductApi.select.call({categoryId:pageData.categoryId, pageNum: pageData.pageNum, pageSize: pageData.pageSize })
    .then((res: any) => { 
      console.log(res.items);
      productData.value = productData.value.concat(res.items)
      pageData.pageNum = pageData.pageNum + 1;
  })
}



const onLoad = () => {
  CallProductApi()

    // 加载状态结束
  loading.value = false;
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  // setTimeout(() => {
  //   for (let i = 0; i < 10; i++) {
  //     // list.value.push(list.value.length + 1);
  //     productData.value.push(productData.value.length + 1 + "商品名称");
  //   }

    // 加载状态结束
    //loading.value = false;

    // 数据全部加载完成
    // if (productData.value.length >= 10) {
    //   finished.value = true;
    // }
};


const click = (id: any) => { 
  router.push({ name: 'moveproductxq', query: {id:id} })
}

const onClickLeft = () => history.back();
</script>
<style >
.van-card{
  background: #d9d5d5;
}
.van-card__header{
  background: #e3e7ea;
  border-radius: 5px;
  border-bottom: 2px solid #f4f8fb;
}

</style>